{% extends "common.html" %}
{% block customJavascript %}
	$(function(){
		$("div.radioContainer").buttonset();
		$("button#addRoommate").button();
		$("button#addBill").button();
	});
	$(function(){
		$("input[name=view]").click(function(){
			if(this.id == "roommates"){
				$("div.roommateContainer").show("fast");
				$("div.billContainer").hide("fast");
			} else {
				$("div.roommateContainer").hide("fast");
				$("div.billContainer").show("fast");
			}
		});
	});
{% endblock customJavascript %}
{% block content %}
<div class="radioContainer">
	<input type="radio" checked id="roommates" name="view"/><label for="roommates">Roommates</label>
	<input type="radio" id="bills" name="view"/><label for="bills">Bills</label>
</div>	
<div class="roommateContainer">
	{% for roommate in roommates %}
		<div class="roommate">
			<label>Name: {{ roommate.name }}</label>
		</div>
	{% endfor %}
	<div class="roommate">
		<button id="addRoommate">Add Roommate</button>
	</div>
</div>
<div class="billContainer">
	{% for bill in bills %}
		<div class="bill">
			<label>Name: {{ bill.name }}</label>
			<label>Amount: {{bill.totalAmount }}</label>
			<label>Owner: {{bill.owner.name}}</label>
		</div>
	{% endfor %}
	<div class="bill">
		<button id="addBill">Add Bill</button>
	</div>
{% endblock content %}
